<template>
  <!-- 导航界面 -->
  
  <HeaderNav login-page/>

  <!-- 登录面板 -->
  <section class="login">
    <div class="login-type">
      <a :class="{checked: type === 'tel'}" @click="type = 'tel'">密码登录</a>
      <a :class="{checked: type === 'sms'}" @click="type = 'sms'">邮箱登录</a>
    </div>

    <form class="login-pwd login-panel" autocomplete="off" v-show="type === 'tel'">
      <input type="text" name="username" class="inp user" placeholder="手机号"/>
      <input :type="eyeType" name="password" class="inp pwd" placeholder="密码"/>
      <!-- 处理密码眼睛 -->
      <span class="eye" @click="showEye = !showEye" :class="{clos:!showEye, open: showEye}"></span>

      <div class="re">
        <input type="checkbox" name="remember-me" id="remember-me"/>
        <label for="remember-me">下次自动登录</label>
        <a class="find-pass" @click="$router.push({name: 'find-pass'})">忘记密码，立即找回</a>
      </div>

      <a class="log-btn">登录</a>

      <a href="/register" class="regist">没有账号？立即注册</a>

    </form>

    <form class="login-sms login-panel" autocomplete="off" v-show="type === 'sms'">
      <input type="text" name="tel" class="inp tel" placeholder="邮箱地址"/>
      <input type="code" name="code" class="inp code" placeholder="验证码"/>
      <span class="btn-code">获取验证码</span>

      <div class="re">
        <input type="checkbox" name="remember-me" id="remember"/>
        <label for="remember">下次自动登录</label>
      </div>

      <a class="log-btn">登录</a>

      <a href="/register" class="regist">没有账号？立即注册</a>

    </form>

    <div class="third">
      <span class="lf"></span>第三方登录<span class="rf"></span>
    </div>

    <p class="third">
      <a class="zfb"><span>支付宝</span></a>
      <a class="wx"><span>微信</span></a>
      <a class="qq"><span>QQ</span></a>
    </p>

  </section>

  <Footer />
</template>

<script>
import '../assets/css/login.css' ;
import Footer from "../components/Footer.vue";
import HeaderNav from '../components/HeaderNav.vue'
export default {
  data() {
    return {
	   showEye: false, // 密码眼睛显示方式
       type: 'tel' , // 登录方式 ， tel 或者 sms
    }
  },
  components: {
    Footer ,
	HeaderNav, 
  },
  computed: {
	  eyeType() {
		  return this.showEye ? "text" : "password" ;
	  }
  }
}

</script>

<style scoped>
footer {
  position: relative;
  width: 1200px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
  top: 120px;
}

footer p {
  text-align: center;
  color: rgb(178, 178, 178);
  line-height: 20px;
  font-size: 12px;
}

footer .site {
  color: #1296DB;
}
</style>
